<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES6 => 新增箭头函数  
    // ES6 允许使用“箭头”（=>）定义函数。

    /* var f = v => v;

    var add = (a, b) => a + b; */


    // 如何把普通函数改为箭头函数?
    // 1. 把普通函数改为匿名函数  => 所有的箭头函数都是匿名函数
    // 2. 省略关键词 function 在()之后 加=> 
    // 3. 如果函数的参数只有一个,且没有设置默认值,或者参数解构 => 可以省略()
    //    如果没有参数,参数有多个, => 不能省略()
    // 4. 如果函数的执行语句只有一条,且是return语句 => 省略 {} 和return
    //  注意:如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错


    function fn(a, b) {
        console.log(a, b);
        return a + b;
    }

    // 1. 把普通函数改为匿名函数  => 所有的箭头函数都是匿名函数
    var fn = function (a, b) {
        console.log(a, b);
        return a + b;
    }

    // 2. 省略关键词 function 在()之后 加=> 
    // var fn = (a, b) => {  // 两个参数   不能省略()
    //     console.log(a, b);
    //     return a + b;
    // }
    // var result = fn(10, 20)
    // console.log(result);

    // 3. 如果函数的参数只有一个,且没有设置默认值,或者参数解构 => 可以省略()
    //    如果没有参数,参数有多个, => 不能省略()
    // var fn = (a = 0) => { // 单参数 => 有默认值 不能省略()
    //     console.log(a);
    //     return a * 10;
    // }
    // var result = fn(10)
    // console.log(result);


    // var fn = (a) => {
    //     console.log(a);
    //     return a * 10;
    // }

    // var fn = a => { )
    //     console.log(a);
    //     return a * 10;
    // }
    // var result = fn(10)
    // console.log(result);

    // 4. 如果函数的执行语句只有一条,且是return语句 => 省略 {}和return
    // var fn = a => {
    //     return a * 10;
    // }

    // var fn = a => a * 10;

    // var result = fn(10)
    // console.log(result);

    // 注意:如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
    var fn = v => ({ num: v });

    var result = fn(10); //  {num:10}
    console.log(result);



</script>

</html>